<template>
	<view class="">
		<u-navbar :border-bottom="false" title="品牌商签约" :title-size="36" :title-bold="true" :title-color="textColor" :background="{background: '#fff'}"></u-navbar>
		<view class="shop-header">
			<image :src="shopInfo.logoUrl" mode="" class="shop-logo"></image>
			<view class="shop-name u-text-center">
				{{shopInfo.shopName}}
			</view>
			<view class="shop-user-title  u-text-center">
				企业负责人
			</view>
			<view class="shop-user-info u-text-center">
				{{shopInfo.principalName}}   				{{shopInfo.principalMobile}}
			</view>
		</view>
		
		<view class="u-flex u-row-center u-p-l-20 u-p-r-20" style="background-color: #fff;">
			<view class="" style="width: 220rpx;font-weight: 500;font-size: 32rpx;">
				指定级别
			</view>
			<u-cell-group class=""  :border="false">
				<u-cell-item :title-style="levelStyle" :border-bottom="false" @click="getLevelList"	 :title="levelTitle" :arrow="true" arrow-direction="right"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-flex u-row-center u-p-l-20 u-p-r-20" style="background-color: #fff;">
			<view class="" style="width: 220rpx;font-weight: 500;font-size: 32rpx;">
				指定销售商
			</view>
			<u-cell-group class=""  :border="false">
				<u-cell-item  :title-style="shopStyle"	:border-bottom="false"	@click="getShopList" :title="shopTitle" :arrow="true" arrow-direction="right"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="">
			<view class="u-p-20 u-m-t-20 u-font-32" style="background-color: #fff;font-weight: 500;">
				已授权商品价格
			</view>
			<view class="u-flex u-col-center u-row-center" style="height: 500rpx;background-color: #fff;" v-if="!showProduct">
				<text>未选择级别</text>
				
			</view>
			<shopPrice v-if="showProduct" :shopLevelId="chooseLevel"/>
		</view>
		
		<view class="apply-btn-container">
			<u-button class="apply-btn" @click="applySubmit">确定</u-button>
		</view>
		
		<u-popup mode="bottom" v-model="levelShow">
			<view class="level-show">
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<view>
						<u-radio-group v-model="chooseLevel" :wrap="true" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
							<u-radio 
								@change="levelChooseFn" 
								v-for="(item, index) in levelList" :key="index" 
								:name="item.id"
								class="choose-radio"
							>
							<text class="u-m-l-20">{{item.name}}</text>
							</u-radio>
						</u-radio-group>
					</view>
				</scroll-view>  
				<view class="confrim-btn">
					<!-- <u-button @click="levelShow = false;">确定</u-button> -->
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="bottom" v-model="shopShow">
			<view class="level-show">
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<view>
						<u-radio-group style="width:100%;"  v-model="chooseShop" :wrap="true" :size="40" :icon-size="20" :label-disabled="false" shape="circle" :active-color="themeColor" >
							<u-radio
								@change="shopChooseFn" 
								v-for="(item, index) in shopList" :key="item.shopId" 
								:name="item.shopId"
								class="choose-radio"
							>
								<text class="u-m-l-20">{{item.shopName}}</text>
							</u-radio>
						</u-radio-group>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
	import shopPrice from '../compontents/shopPrice.vue'
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data(){
			return{
				levelTitle:'请选择级别',
				shopTitle:'请选择销售商',
				chooseLevel:'',
				chooseShop:'',
				levelShow:false,
				shopShow:false,
				levelList:[],
				loading:false,
				shopList:[
				
				],
				showProduct:false,
				shopId:'',
				qrcode:'',
				shopInfo:{
					
				},
			}
		},
		components:{
		shopPrice		
		},
		computed:{
			levelStyle(){
				let titleStyle = {};
				if(this.chooseLevel === ''){
					titleStyle.fontSize = '28rpx';
					titleStyle.color = '#999';
				}else{
					titleStyle.fontSize = '32rpx';
					titleStyle.fontWeight = 'bolder';
					titleStyle.color = '#333';
				}
				return titleStyle;
			},
			shopStyle(){
				let titleStyle = {};
				if(this.chooseShop === ''){
					titleStyle.fontSize = '28rpx';
					titleStyle.color = '#999';
				}else{
					titleStyle.fontSize = '32rpx';
					titleStyle.fontWeight = 'bolder';
					titleStyle.color = '#333';
				}
				return titleStyle;
			},
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		
		onLoad(options){
			this.qrcode = options.qrcode;
			this.getShopInfo();
		},
		methods:{
			async getShopInfo(){
				this.loading = true;
				let params = {
					qrCodeData:this.qrcode,
				}
				const res = await this.$newHttp.post('api/Shop/v2/GetShopPrincipalForApp',params);
				this.loading = false;
				if(res.code === 200){
					this.shopId = res.data.shopId;
					this.shopInfo = res.data;
				}else{
					this.$u.toast('获取企业信息失败，错误信息：'+res.erroMessage);
					this.$mHelper.delayedJump();
				}
			},
			levelChooseFn(val){
				
				this.showProduct =false;
				this.chooseLevel = val;
				this.$nextTick(() => {
						this.showProduct = true;
					})
				let index = this.levelList.findIndex(item=>{
					return item.id === val;
				});
				
				this.levelTitle = this.levelList[index].name;
			},
			shopChooseFn(val){
				this.chooseShop = val;
				let index = this.shopList.findIndex(item=>{
					return item.shopId === val;
				});
				this.shopTitle = this.shopList[index].shopName;
			},
			async getLevelList(){
				let params = {
					  "pageIndex": 1,
					  "pageSize": 999,
					  "shopId": this.storeShop.id,
					  "isDeleted": false
				}   
				this.loading = true;
				const res = await this.$newHttp.post('api/BrandOwner/GetShopLevelsByPage',params);
				this.loading = false;
				if(res.code === 200){
					this.levelList = res.data.list;
					this.levelShow = true;
				}else{
					this.$u.toast('获取品牌商级别失败');
				}
			},
			async getShopList(){
				this.loading = true;
				const res = await this.$newHttp.get('api/BrandOwner/GetOpenRecommendedShops?IsPaging=false');
				this.loading = false;
				if(res.code === 200){
					if(res.data.length === 0 ){
						this.$u.toast('没有可签约的销售商');
					}else{
						this.shopList = res.data;
						this.shopShow = true;	
					}
					
				}else{
					this.$u.toast('获取可签约的销售商失败');
				}
			},
			async applySubmit(){
				this.loading = true;
				let params = {
					brandOwnerId:this.storeShop.id,
					shopId:this.shopId,
					shopLevelId:this.chooseLevel,
					sellerId:this.chooseShop,
				}
				const res = await this.$newHttp.post('api/BrandOwner/ContractedDistributor',params);
				this.loading = false;
				if(res.code === 200){
					this.$u.toast('签约成功');
					this.$mHelper.delayedJump();
				}else{
					this.$u.toast('签约失败，错误信息：'+res.erroMessage)
				}
			},
		}
	}
</script>

<style lang="scss">
	.shop-header{
		background: #fff;
		overflow: hidden;
		margin-bottom: 20rpx;
		.shop-logo{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin: 48rpx auto 30rpx;
			display:block;
		}
		.shop-name{
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		.shop-user-title{
			font-size: 24rpx;
			font-weight: 400;
			color: #999;
			margin: 60rpx 0 20rpx;
		}
		.shop-user-info{
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 40rpx;
		}
	}
	.level-show{
		box-sizing: border-box;
		padding: 20rpx;
		.choose-radio{
			height: 100rpx;
			border:1px solid #eeeeee;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			::v-deep.u-radio__label{
				flex:1;
			}
		}
	}
	.apply-btn-container{
		// position: fixed;
		// bottom: 100rpx;
		width: 100%;		
		margin: 30rpx 0;
		z-index: 999;
		display: block;
		.apply-btn{
			width: 80%;
			height: 90rpx;
			background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);
			border-radius: 45rpx;
			&::after{
				border: none;
			}
		}
	}
	
</style>
